<template>
  <div>
    <ul class="cj_box">
      <li
        v-for="item in renderList"
        :class="{ active: activeIndex === item.index }"
        :key="item.id"
        @click="fn(item)"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: null,
      cj: 4, // 控制中奖为第五个下标
    };
  },

  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    renderList() {
      let ary = this.list.map((item, index) => {
        switch (index) {
          case 3:
            return {
              ...this.list[7],
              index: 7,
            };
          case 4:
            return {
              ...this.list[3],
              index: 3,
            };
          case 5:
            return {
              ...this.list[6],
              index: 6,
            };
          case 6:
            return {
              ...this.list[5],
              index: 5,
            };
          case 7:
            return {
              ...this.list[4],
              index: 4,
            };

          default:
            return {
              ...item,
              index: index,
            };
        }
      });
      return ary
        .slice(0, 4)
        .concat({ id: "btn", text: "开始抽奖" })
        .concat(ary.slice(4));
    },
  },
  methods: {
    fn(item) {
      // 在return ary那里 我们添加的点击li，赋予的id是btn
      // 下面代码当不等于btn的时候，那就意味着不是点击按钮，直接return
      if (item.id !== "btn") return;
      // 然后在date里，定义一个下标赋值为null，初始值设为null是控制抽奖转动，不点击按钮的时候，就不会有显示中奖的高亮
      this.activeIndex = null;
      // 封装一个抽奖的函数，并在fn函数里调用  ，参数为执行的时间参数
      this.move(100,this.zj);
    },

    zj(res){
         console.log('中奖信息',res)
    },
    // 参数time，表示传入的时间数，每10毫秒执行一次
    move(time,fn) {
        console.log(time)
      if (time > 400) {
      // 当中奖下标不等于我设置的奖品下标时，继续执行，
        if (this.activeIndex !== this.cj) {
        // 定时器
          this.timer = setTimeout(() => {
            let n = this.activeIndex + 1;
            console.log(n)
            this.activeIndex = n % 8;
            // 这里时间参数要小，这样才不会看出来倪端，不然猛的停下来，一看就太假。这样就是慢慢停到你想让他中奖的那个li上
            this.move(time + time * 0.1,this.zj);
          }, time);
        } else {
        // 中奖下标等于我设置的奖品下标时，中奖了
          fn(this.cj)
        }
      } else {
        this.timer = setTimeout(() => {
          let n = this.activeIndex + 1;
          this.activeIndex = n % 8;
          this.move(time + time * 0.1,this.zj);
        }, time);
      }
    },
  },
};
</script>


<style scoped lang="scss">
.cj_box {
  width: 800px;
  height: 800px;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    width: 251px;
    height: 251px;
    background-color: #eee;
    text-align: center;
    line-height: 251px;
    &:nth-child(5) {
      cursor: pointer;
    }
  }
  li.active {
    background-color: rgb(233, 159, 159);
  }
}
</style>